<template>
  <!-- 已废弃 -->
  <div class="questions_warp">
    <componentsHeader></componentsHeader>
    <div class="container">
      <div class="aside">
        <div class="title">审计云系统</div>
        <div class="collapse">
          <el-collapse v-model="activeName">
            <el-collapse-item v-for="(item,index) in collapseLost" :key="index">
              <template slot="title" style="position: relative;">
                <div>{{ item.name }}</div>
                <div class="arrow_icon"></div>
              </template>
              <div v-for="child in item.children" @click="clickItem(child)">{{child.name}}</div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <div class="main">
        <div class="tags_box">
          <el-tag :key="tag.path" v-for="tag in dynamicTags" closable :disable-transitions="false">
            {{tag.name}}
          </el-tag>
        </div>
        <div class="content_box"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import componentsHeader from "@/components/header/header.vue";
  import CloudSystem from '@/router/cloudSystem.js'
  export default {
    name: "questions",
    data() {
      return {
        collapseLost: CloudSystem,
        activeName: 1,
        dynamicTags: [],
        tableData: [{}],
        dialogTableVisible: false,
      }
    },
    components: {
      componentsHeader,
    },
    created() {
      console.log(CloudSystem)
    },
    mounted() {
      console.log(CloudSystem)
    },
    methods: {
      clickItem(child){
        console.log(child)
        if(this.dynamicTags.includes(child)){
          // this.$router.push({
          //   path: child.path
          // });
        }else{
          this.dynamicTags.push(child);
          // this.$router.push({
          //   path: child.path
          // });
        }
      },
    },
    watch: {

    }
  }
</script>

<style lang="less" scoped>
  .questions_warp {
    .container {
      background: #F4F7FC;
      display: flex;
      height: calc(100vh - 70px);

      .aside {
        width: 300px;
        height: 100%;
        overflow-y: auto;
        background-color: #fff;
        margin-right: 25px;

        .title {
          margin: 0 auto;
          width: 270px;
          height: 52px;
          line-height: 52px;
          text-align: center;
          background: #338AFF;
          border-radius: 4px;
          color: #fff;
          margin-top: 17px;
          margin-bottom: 19px;

        }

        .collapse {
          margin: 0 auto;
          width: 270px;

          /deep/.el-collapse {
            border: none;

            .el-collapse-item__header {
              border: none;
              width: 270px;
              height: 52px;
              line-height: 52px;
              border-radius: 4px;
              padding-left: 43px;
              box-sizing: border-box;
            }

            .is-active {
              color: #4889FF;
              background: #F3F8FF;
            }

            .el-collapse-item__wrap {
              border: none;

              .el-collapse-item__content {
                padding: 0;
                // height: 52px;
                line-height: 52px;

                // padding-left: 43px;
                // box-sizing: border-box;
                &>div {
                  padding-left: 43px;
                  box-sizing: border-box;
                }
              }
            }
          }
        }
      }

      .main {
        box-sizing: border-box;
        flex: 1;
        padding-right: 18px;

        .tags_box {
          margin: 22px 0 18px;
          height: 50px;
          line-height: 50px;
          background: #FFFFFF;
          box-shadow: 0px 0px 10px 0px #E5E9EF;
          border-radius: 10px;
          box-sizing: border-box;
          padding-left: 18px;

          /deep/.el-tag {
            margin-right: 10px;
          }
        }

        .content_box {
          height: calc(100vh - 160px);
          background: #FFFFFF;
          box-shadow: 0px 0px 10px 0px #E5E9EF;
          border-radius: 4px 4px 0px 4px;
        }
      }
    }
  }
</style>
